<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="applicable-device" content="pc,mobile"/>
    <title>拉新</title>

<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="./css/animate.css" type="text/css"/>
<link rel="stylesheet" href="./css/jquery.message.css" type="text/css"/>


<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.message.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="./js/unitAuto.min.js"></script>

</head>

<body>

    <div class=" box1">
        <div class="title">
            <a href="javascript:void(0);" onclick="history.back();"><div class="arrow-box"> <img src="./images/arrow.png" alt=""> </div></a>
            <span>全国排名</span>
        </div>
        <div class="box1-con">
            
    
       
            <img src="./images/one-ranking-list.png" class="one-ranking-list" id="oneRankingImg" style="display: none;">
            <img src="./images/team-ranking-list.png" class="one-ranking-list" id="teamRankingImg" style="display: none;">
            
            <div id="personListContainer">
                <!-- 排名列表项将在这里动态生成 -->
            </div>
        </div>
    </div>

</body>
</html>
<script>
    console.log($IMGBASEURL)
document.addEventListener('DOMContentLoaded', function() {
    // 模拟Vue的数据
    let type = getUrlParameter('type')
    console.log('type', type)

    // 显示正确的排名图片
    document.getElementById(type == 2 ? 'oneRankingImg' : 'teamRankingImg').style.display = 'block';

    // 生成排名列表
    var container = document.getElementById('personListContainer');

    postRequest(rankingList_api,{type}).then((res)=>{
        console.log('lucky_phone',res);
        if(Array.isArray(res.data) && res.data.length>0){
            personLists = res.data

            personLists.forEach(function(item, index) {
        var listItem = document.createElement('div');
        listItem.className = 'pmlist flex justify-between align-center';
        
        var rankImage = '';
        if(type == 1){
            if (index == 0) {
                rankImage = '<img src="./images/team_no1.png">';
            } else if (index == 1) {
                rankImage = '<img src="./images/team_no2.png">';
            } else if (index == 2) {
                rankImage = '<img src="./images/team_no3.png">';
            } else {
                rankImage = '<div>' + item.ranking + '</div>';
            }
        }else{
            if (index == 0) {
                rankImage = '<img src="' + $IMGBASEURL + '/home/no-1.png">';
            } else if (index == 1) {
                rankImage = '<img src="' + $IMGBASEURL + '/home/no-2.png">';
            } else if (index == 2) {
                rankImage = '<img src="' + $IMGBASEURL + '/home/no-3.png">';
            } else {
                rankImage = '<div>' + item.ranking + '</div>';
            }
        }
       

        listItem.innerHTML = `
            <div class="pmlist-l flex align-center">
                <div class="pmlist-l-pm flex align-center">
                    ${rankImage}
                </div>
                <div class="pmlist-l-tx u-m-l-24">
                    <img src="${item.logo || ''}" class="">
                </div>
                <div class="u-m-l-16">
                    <p>${item.name  || '--'}</p>
                    ${type == 2 && item.ss  == 1 ? `<p class="user_desc">${item.user ? item.user.user_nickname : '' || '--'}</p>` : ''}
                </div>
            </div>
            <div class="pmlist-r">
                ${type == 2 ? '个人' : '团队'}拉新<span class="text-FF6842">${item.count || 0}</span>人
            </div>
        `;
        
        container.appendChild(listItem);
    });
        }
    })




    
});
</script>
